---
id: guides-using-with-vue-js
slug: /search-ui/guides/using-with-vue-js
title: Using with Vue.js
date: 2022-07-18
tags: ["search", "interface", "ui", "example", "vue", "vuejs"]
---

While Search UI doesn't have a component library for Vue.js, you can still use them together, just with a little extra work.

To achieve that you'll need to import and work directly with Search UI Core API. Read a short <DocLink id="api-architecture" /> guide for high-level overview on the approach.

Once you're familiar with the concept of Search UI core, the following docs will give you deeper dive into available APIs:

- <DocLink id="api-core-configuration" />
- <DocLink id="api-core-state" />
- <DocLink id="api-core-actions" />

## Example

The following demo is a good starting point for your Search UI implementation. The source code is available on GitHub: https://github.com/elastic/search-ui/tree/master/examples/vue

<iframe
  src="https://codesandbox.io/embed/github/elastic/search-ui/tree/master/examples/vue?autoresize=1&fontsize=12&theme=light&view=preview&hidedevtools=1"
  style={{
    width: "100%",
    height: "800px",
    overflow: "hidden"
  }}
  title="Search UI"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
